<template>
  <checkbox-group class="li-radio" @change="checkboxChange">
    <label
      v-for="(item, index) in rangeList"
      :key="index"
      class="li-radio-item"
    >
      <checkbox
        :disabled="disabled"
        :value="item[rangeValue]"
        :checked="
          Array.isArray(innerValue) &&
          innerValue.some((itm) => itm == item[rangeValue])
        "
      />
      <text>{{ item[rangeKey] }}</text>
    </label>
  </checkbox-group>
</template>

<script>
export default {
  name: "LiCheckbox",
  props: {
    value: {},
    rangeList: {
      type: Array,
      default: [],
    },
    rangeKey: {
      type: String,
      default: "text",
    },
    rangeValue: {
      type: String,
      default: "id",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      innerValue: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.innerValue = newVal;
    },
  },
  methods: {
    checkboxChange(e) {
      this.$emit("input", e.detail.value);
      this.$emit("change", {
        detail: {
          value: e.detail.value,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.li-radio {
  display: flex;
  flex-wrap: wrap;

  .li-radio-item {
    margin-right: 6px;
    margin-bottom: 6px;
    margin-top: 6px;
    white-space: nowrap;
  }
}
</style>
